import { Tag} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import styles from './index.less'
import CustomTable from '@/components/Table'
import {getDeviceList} from '@/service/carMessage/list'
import {bindType} from '../../../dict'

const Equipment = memo((props: any) => {
	const {vin} = props.data
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])

	const columns: any = [
		{
			title: '设备号',
			dataIndex: 'device_sn',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '设备类型',
			dataIndex: 'category_name',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		// {
		//   title: '所属公司',
		//   dataIndex: 'vin',
		//   align: 'center',
		//   width: 140,
		//   render: (text: string) => <span>{text || '--'}</span>,
		// },
		{
			title: '厂商名称',
			dataIndex: 'manufacture_name',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '设备型号',
			dataIndex: 'device_sn',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: 'SIM卡号',
			dataIndex: 'sim',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '设备状态',
			dataIndex: 'status_name',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '是否已绑定车辆',
			dataIndex: 'bind',
			align: 'center',
			width: 140,
			render: (text: any, record: any) => (
				<>
					{text ? (
						<span>
							{bindType?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</span>
					) : (
						'--'
					)}
				</>
			),
		},
		{
			title: '城市',
			dataIndex: 'city_name',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '绑定时间',
			dataIndex: 'install_time',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '设备创建时间',
			dataIndex: 'create_time',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]

	// 获取维保记录
	const onListFun = () => {
		setLoading(true)
		getDeviceList({
			pageNum: params?.current,
			pageSize: params?.size,
			vin,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data)
					setTotal(res?.page?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}

	useEffect(() => {
		onListFun()
	}, [params, vin])

	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<CustomTable
					columns={columns}
					pagination
					total={total}
					params={params}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
			</div>
		</div>
	)
})
export default Equipment
